// 积木栏分类设置
// 1. 为了创建自定义类别，先创建自定义类别，继承自Blockly.ToolboxCategory
class CustomCategory extends Blockly.ToolboxCategory {
  // 自定义类别创造函数
  // categoryDef: 类别定义的信息
  // toolbox: 表示类别的父级toolbox
  // opt_parent: 可选参数，表示其父类别
  constructor(categoryDef, toolbox, opt_parent) {
    super(categoryDef, toolbox, opt_parent);
  }
  addColourBorder_(colour) {
    this.rowDiv_.style.backgroundColor = colour;
  }
  setSelected(isSelected) {
    var labelDom = this.rowDiv_.getElementsByClassName("blocklyTreeLabel")[0];
    if (isSelected) {
      // 选中的类别背景色设置为白色
      this.rowDiv_.style.backgroundColor = "var(--toolbox-label-selected-background)";
      // 选中的类别文本设置为原背景色
      labelDom.style.color = '';
    } else {
      // 未选中的类别背景色设置为空
      this.rowDiv_.style.backgroundColor = "";
      // 未选中的类别文本设置为白色
      labelDom.style.color = "var(--toolbox-label-unselected-color)";
    }
    // This is used for accessibility purposes.(不太清楚作用)
    Blockly.utils.aria.setState(/** @type {!Element} */ (this.htmlDiv_), Blockly.utils.aria.State.SELECTED, isSelected);
  }
  //图标添加重写
  createIconDom_() {
    const img = document.createElement("img"); //这里使用iconpark，可以自己决定用什么
    img.src = this.cssConfig_.path; //this.cssConfig_.icon是toolBox.xml中的css-icon中的值，格式为this.cssConfig_.xxx=css-xxx
    //img.size = "21";
    //img.color = "white";
    //img.style = `
      //-webkit-mask-size: 100% 100%;
      //-webkit-mask-image: url(./static/boxy/iconpark/superellipse.svg);
      //mask-size: 100% 100%;
      //mask-image: url(./static/boxy/iconpark/superellipse.svg)`;
    return img;
  }
}

// 2. 自定义类别需要向Blockly注册，告知自定义类别的存在，不然会无法识别新建的类
Blockly.registry.register(
  Blockly.registry.Type.TOOLBOX_ITEM,
  Blockly.ToolboxCategory.registrationName,
  CustomCategory,
  true
);
